<template>
  <view>
    <u-sticky>
      <view class="bgWhite">
        <up-tabs :list="tablist" @click="onTabClick" :scrollable="false" :current="currentTab" :inactiveStyle="{
      	           fontWeight: '400',
      	           fontSize: '30rpx',
      	           lineHeight:2.5,
      	           color: '#5C5C5C',
      	         }" :activeStyle="{
      	           fontWeight: '600',
      	           fontSize: '30rpx',
      	           lineHeight:2.5,
      	           color: '#202020',
      	         }" :itemStyle="{
      	           paddingLeft:'5rpx',
      	           paddingRight:'5rpx',
      	         }" :lineHeight="5" lineColor="#00C1B9">
        </up-tabs>
        <view class="cateBox u-flex u-row-between" v-if="params.type==1||params.type==2||params.type==3">
          <view class="cateItem" :class="cateIndex==index?'active':''" v-for="(item,index) in cateList"
            @click="onCateClick(index,item?.id)">
            <view>{{item?.name}}{{item?.num}}</view>
          </view>
        </view>
        <view class="cateBox u-flex u-row-around" v-if="params.type==5">
          <view class="cateItem1" :class="cateIndex1==index?'active':''" v-for="(item,index) in cateList1"
            @click="onCateClick1(index,item?.id)">
            <view>{{item?.name}}</view>
          </view>
        </view>
      </view>

    </u-sticky>
    <view>
      <view class="list" v-if="currentTab==0||currentTab==1">
        <view class="list_item" v-for="(item,index) in articelList" :key="index" @click="toDetail(item)">
          <view class=" u-flex u-col-center  u-p-20">
            <view class="time u-flex-1" :style="item?.status==2?'color:#AAAAAA':''">
              {{formatDate(item?.create_time,'YYYY-MM-DD HH:mm')}}
            </view>
            <view class='statusText'>
              <text class="success" v-if="item?.status==1">已发布</text>
              <text class="loading" v-if="item?.status==0">审核中</text>
              <text class="noPass" v-if="item?.status==2">未通过</text>
            </view>
          </view>

          <view class="u-p-l-20 u-p-r-20">
            <view class="captions">
              <view class="title u-line-1 " :style="item?.status==2?'color:#AAAAAA':''">{{item?.title}}</view>
              <view class="content  u-line-2" v-if="params.type==1" :style="item?.status==2?'color:#AAAAAA':''">
                {{item?.content}} <text v-if="item.showAll" class="showAll">...<text v-if="item.showAll"
                    style="color:#00C1B9">全文</text></text>
              </view>
              <view class="content  u-line-2" v-if="params.type==2" :style="item?.status==2?'color:#AAAAAA':''">
                {{item?.text_area}} <text v-if="item.showAll" class="showAll">...<text v-if="item.showAll"
                    style="color:#00C1B9">全文</text></text>
              </view>
              <view class="image" v-if="item?.link_url?.length>0">
                <view class="imagesItem" v-for='(items,index) in item?.link_url' :key="index" v-show="index<3">
                  <image :src="items" mode="aspectFill"></image>
                </view>
              </view>
              <view class="image" v-if="item?.image?.length>0">
                <view class="imagesItem" v-for='(items,index) in item?.image' :key="index" v-show="index<3">
                  <image :src="items" mode="aspectFill"></image>
                </view>
              </view>
              <view class="videoimage" v-if="item.video">
                <view class="imagesItem" v-for='(items,indexs) in item?.image' :key="index">
                  <image :src="items" mode="aspectFill"></image>
                </view>
                <image src="https://ossresource.miyingbl.com/def/4e600202406241142076397.png" mode="" class="playIcon">
                </image>
              </view>
            </view>
            <view class="actions u-flex u-p-t-20   u-row-between" v-if="item?.status!=2">
              <view class="actionsItem  u-flex u-col-center ">
                <image src="https://ossresource.miyingbl.com/def/d6e24202405231501531445.png" class="icons"></image>
                <text v-if="params.type==1">{{item?.view_number}}</text>
                <text v-else>{{item?.views_number}}</text>
              </view>
              <view class="actionsItem  u-flex u-col-center" @click.stop="toDetailCom(item)">
                <image src="https://ossresource.miyingbl.com/def/bd0b5202405231502545151.png" class="icons"></image>
                <text>{{item?.comment_number}}</text>
              </view>
              <view class="actionsItem  u-flex u-col-center" @click.stop="onArticleOperate(item,1)">
                <image src="https://ossresource.miyingbl.com/def/9f361202405231506404750.png" class="icons"
                  v-if="item?.is_like"></image>
                <image src="https://ossresource.miyingbl.com/def/29cbd202405231506398795.png" class="icons" v-else>
                </image>
                <text>{{item?.zan_number}}</text>
              </view>
              <view class="actionsItem  u-flex u-col-center" @click.stop="onArticleOperate(item,2)">
                <image src="https://ossresource.miyingbl.com/def/2cb00202405231506423239.png" class="icons"
                  v-if="item?.is_collect"></image>
                <image src="https://ossresource.miyingbl.com/def/7165b202405231506414059.png" class="icons" v-else>
                </image>
                <text>{{item?.collect_number}}</text>
              </view>
            </view>
            <view class="line u-m-t-20"></view>
          </view>
          <view class="u-flex u-p-20" v-if="item?.status!=2">
            <image src="https://ossresource.miyingbl.com/def/749e0202405231721404518.png" mode="" class="seeIcon">
            </image>
            <view class="u-flex-1 u-tips-text u-p-l-10">{{item?.permission==1?'仅自己可见':'所有人可见'}}</view>
            <image src="https://ossresource.miyingbl.com/def/c6629202405231712475613.png" mode="" class="moreIcon"
              @click.stop="openMore(item,index)">
            </image>
          </view>
          <view class="u-flex u-p-20" v-if="item.status==2">
            <view class="reasonBox">未通过原因：<text v-if="item?.reject_reason">{{item?.reject_reason.substr(0,20)}}</text>
            </view>
          </view>
        </view>
        <h-loading :show="loading" :showMore="articelList?.length"></h-loading>
      </view>
      <!-- 视频列表 -->
      <view class="list2 u-flex" v-if="currentTab == 2">
        <view
          class="listItem3"
          v-for="(item, index) in articelList"
          :key="index"
          @click="toAppVideo(item, index)"
        >
          <image
            :src="item.video_url + '?x-oss-process=video/snapshot,t_480,f_jpg'"
            mode="aspectFill"
            class="thumb"
          >
          </image>
          <view class="more" @click.stop="moreOpen1(item, index)">
            <u-icon name="more-dot-fill" color="#fff"></u-icon>
          </view>
          <view class="foot u-flex" v-if="item.status == 1">
            <u-icon name="play-right-fill" color="#fff"></u-icon>
            <view class="u-p-l-10">{{ item.view_number }}</view>
          </view>
          <view class="foot u-flex" v-else-if="item.status == 0">
            <u-icon name="play-right-fill" color="#FFB300"></u-icon>
            <view class="u-p-l-10" style="color: #ffb300">审核中</view>
          </view>
          <view class="foot u-flex" v-else-if="item.status == 2">
            <u-icon name="play-right-fill" color="#fff"></u-icon>
            <view class="u-p-l-10">未通过</view>
          </view>
        </view>
      </view>
      <!-- 直播回放 -->
      <view v-if="currentTab==3" class="list1 u-flex">
          <view class="listItem2" v-for="(item, index) in articelList" @click="toPlayback(item)" :key="index">
            <view class="thumb">
              <image :src="item?.roomImage" mode="aspectFill"></image>
              <view class="viewsBox u-flex">
                <view class="tags">回放</view>
                <view>{{ item?.userCount }}人观看</view>
              </view>
            </view>
            <view class="caption">
              <view class="u-line-1">{{ item?.roomName }}</view>
              <view class="time u-p-t-10">{{ item?.openTime }}</view>
            </view>
          </view>
        </view>

        <view v-if="loaded&&articelList.length==0" class="emptyBox">
          <image src="https://ossresource.miyingbl.com/def/243d3202405231405385619.png" mode=""></image>
          <view>暂无数据</view>
        </view>
      </view>
    </view>
    <u-popup :show="showSheet" mode="bottom" @close="closeSheet" :round="30">
      <view>
        <view class='sheetlistItem' @click="selectClick(0)">编辑</view>
        <view class='sheetlistItem' @click="selectClick(1)">{{currentItem?.permission==1?'所有人可见':'仅自己可见'}}</view>
        <view class='sheetlistItem' @click="selectClick(2)">删除</view>
      </view>
      <u-gap bgColor="#F5F6F8" height="10"></u-gap>
      <view class="u-action-cencel">
        <text @touchmove.stop.prevent :hover-stay-time="150" class="u-action-sheet__cancel-text"
          @click="closeSheet">取消</text>
      </view>
    </u-popup>
    <h-modal titlea="确认删除吗？" @clear="showModel=false" @bind="delDrafts" :show="showModel"></h-modal>
    <!--  <up-action-sheet :actions="sheetlist" @select="selectClick" :title="title" :show="showSheet" round="30"
    :safeAreaInsetBottom="true" cancelText="取消" @close="closeSheet" :closeOnClickAction="true"
    :closeOnClickOverlay="true"></up-action-sheet> -->
    <up-popup :show="showLiveInfo" mode="bottom" @close="closeSheet" :round="30" closeable>
      <view class="u-text-center u-p-t-30  u-p-b-30">编辑直播预告</view>
      <view class="u-p-5">
        <liveCreate :from="'edit'"></liveCreate>
      </view>
    </up-popup>
   <u-popup :show="showMoreVideo" mode="bottom" @close="closeSheet" :round="30" closeable>
     <view class="u-text-center u-p-t-30 u-p-b-30">更多</view>
     <view class="u-flex u-flex-around" v-if="currentItem.status == 0 || currentItem.status == 1">
       <view class="itemMoreVideo" v-if="currentItem.status == 1" @click="toShare()">
         <image
           src="https://ossresource.miyingbl.com/def/89669202407011733286357.png"
           mode=""
         ></image>
         <view class="u-p-t-10">分享给好友</view>
       </view>
       <view class="itemMoreVideo" @click="editP()">
         <image
           src="https://ossresource.miyingbl.com/def/fdb96202407011733295541.png"
           mode=""
         ></image>
         <view class="u-p-t-10">{{
           currentItem?.permission == 1 ? '所有人可见' : '仅自己可见'
         }}</view>
       </view>
       <view class="itemMoreVideo" @click=";(showModel = true), (showMoreVideo = false)">
         <image src="https://ossresource.miyingbl.com/def/244962024070117333095.png" mode=""></image>
         <view class="u-p-t-10">删除</view>
       </view>
     </view>
     <view v-if="currentItem.status == 2">
       <view class="noPassReson"> <text>未通过原因：</text>{{ currentItem?.reject_reason }} </view>
       <view class="delVideo" @click=";(showModel = true), (showMoreVideo = false)">删除视频</view>
     </view>
   </u-popup>
</template>

<script setup>
  import {
    formatDate
  } from '@/utils/index'
  import {
    ref
  } from "vue"
  import {
    onLoad,
    onReachBottom,
    onShow
  } from '@dcloudio/uni-app'
  import {
    navigateTo
  } from "@/utils"
  import {
    useMemberStore,
    useSystemStore
  } from '@/stores'
  const store = useMemberStore()
  const login = ref(null)
  const token = store?.token
  import {
    articleLstApi,
    articleOperateApi,
    getHistoryLiveApi,
    svOperateApi
  } from "@/api/social"
  const params = ref({
    page: 1,
    limit: 10,
    type: 2,
    unset_permission: 2,
    doctor_user_id: store?.userInfo?.uid
  })
  const loading = ref(false)
  const loaded = ref(false)
  const showLiveInfo = ref(false)
  const showMoreVideo = ref(false)
  import liveCreate from "../components/liveCreate/liveCreate"
  onLoad(({
    type
  }) => {
    if (type == 1) {
      params.value.type = 1
      params.value.page = 1
      currentTab.value = 1
      getList()
    } else {
      getList()
    }

    addListener()
  })
  const list4 = ref([{
      name: '育儿经验',
      status: 1
    },
    {
      name: '育儿经验',
      status: 2
    },
    {
      name: '育儿经验',
      status: 3
    }
  ])
  const addListener = () => {
    // 监听关注
    uni.$on('followUser', (row) => {
      let arr = articelList.value.map((v) => {
        if (v.uid == row.uid) {
          return {
            ...v,
            is_follow: !v.is_follow,
          }
        } else {
          return {
            ...v,
          }
        }
      })
      articelList.value = arr
    })

    // 监听点赞 、关注
    uni.$on('update_num', (row) => {
      console.log(row)
      const index = articelList.value.findIndex((item) => item.id == row.id)
      const type = row.taptype == 'is_like' ? 'is_like' : 'is_collect'
      if (index != -1) {
        articelList.value[index].zan_number = row.zan_number
        articelList.value[index].is_like = row.is_like
        articelList.value[index].is_collect = row.is_collect
        articelList.value[index].collect_number = row.collect_number
        articelList.value[index].comment_number = row.comment_number
      }
    })
  }
  const lastPage = ref(0)
  const articelList = ref([])
  const statistics = ref({})
  //直播回放参数
  const playbackParams = ref({
    page: 1,
    limit: 10,
    doctor_user_id: store?.userInfo?.uid
  })
  const getList = () => {
    loading.value = true
    loaded.value = false

    if (cateIndex.value != 0) {
      params.value.status = cateList.value[cateIndex.value].status
    } else {
      delete params?.value?.status
    }
    if (currentTab.value == 3) {
      getHistoryLiveApi(playbackParams.value).then((res) => {
        loading.value = false
        loaded.value = true
        lastPage.value = res?.data?.last_page
        let cunArr = []
        res?.data?.data.forEach((item) => {
          if (item?.video_time > 0) {
            cunArr.push(item)
            articelList.value =
              playbackParams.value.page == 1 ? cunArr : articelList.value.concat(cunArr)
          }
        })
      })
    } else {
      articleLstApi(params.value).then((res) => {
        loading.value = false
        loaded.value = true
        lastPage.value = res.data.list.last_page
        let list = res.data.list.data.map((v) => {
          if (v.text_area?.length > 47 && params.value.type == 2) {
            v.text_area = v.text_area.substr(0, 47)
            v.showAll = true
          }
          if (v.content?.length > 47 && params.value.type == 1) {
            v.content = v.content.substr(0, 47)
            v.showAll = true
          }
          return v
        })
        articelList.value = params.value.page == 1 ? list : articelList.value.concat(list)
        statistics.value = res.data.statistics
        updataCate()
      })
    }


  }
  onReachBottom(() => {
    if (lastPage.value > params.value.page || lastPage.value > playbackParams.value.page) {
      playbackParams.value.page++
      params.value.page++
      getList()
    }
  })
  const tablist = ref([{
      name: '科普',
      id: 2
    },
    {
      name: '帖子',
      id: 1
    },
    {
      name: '视频',
      id: 3
    },
    {
      name: '直播回放',
      id: 4
    },
  ])
  const cateList = ref([{
      name: '全部',
      num: 0
    },
    {
      name: '已发布',
      status: 1,
      num: 0
    },
    {
      name: '审核中',
      status: 0,
      num: 0
    },
    {
      name: '未通过',
      status: 2,
      num: 0
    },
  ])
  const cateList1 = ref([{
      name: '我预约的直播',
      num: 0
    },
    {
      name: '我发布的直播公告',
      status: 1,
      num: 0
    },
  ])
  const updataCate = () => {
    cateList.value[0].num = statistics.value.total
    cateList.value[1].num = statistics.value.published
    cateList.value[2].num = statistics.value.in_review
    cateList.value[3].num = statistics.value.fail
  }
  const sheetlist = ref([{
      name: '编辑修改'
    },
    {
      name: '仅自己可见'
    },
    {
      name: '删除'
    }
  ])
  const showModel = ref(false)
  const showSheet = ref(false)
  const currentTab = ref(0)
  const cateIndex = ref(0)
  // 切换顶部tab


  // 切换顶部tab
  const onTabClick = (e) => {
    console.log(e)
    currentTab.value = e.index
    articelList.value = []
    params.value.type = e.id
    cateIndex.value = 0
    params.value.page = 1
    getList()
  }
  const onCateClick = (index, id) => {
    articelList.value = []
    cateIndex.value = index
    params.value.page = 1
    getList()
  }
  const cateIndex1 = ref(0)
  const onCateClick1 = (index, id) => {
    cateIndex1.value = index
  }
  const currentItem = ref({})
  const currentIndex = ref(0)
  const openMore = (item, index) => {
    currentItem.value = item
    currentIndex.value = index
    showSheet.value = true
  }

  const selectClick = (e) => {
    showSheet.value = false
    if (e == 0) {
      // 编辑
      // onArticleOperate(currentItem.value,4)
      if (params.value.type == 2) {
        navigateTo(`/socials/article/article?id=${currentItem.value?.id}`)
      } else {
        navigateTo(`/socials/issue/index?id=${currentItem.value?.id}`)
      }
    } else if (e == 1) {
      // 修改可见范围
      onArticleOperate(currentItem.value, 5)

    } else {
      // 删除
      showModel.value = true
    }
  }
  const delDrafts = async () => {
    if (currentTab.value == 0 || currentTab.value == 1) {
      let res = await onArticleOperate(currentItem.value, 3)
    } else {
      let res = await opreatVideo(1)
    }
    showModel.value = false
    cateList.value[0].num--
    if (currentItem.value.status == 1) {
      cateList.value[1].num--
    } else if (currentItem.value.status == 2) {
      cateList.value[3].num--
    } else if (currentItem.value.status == 0) {
      cateList.value[2].num--
    }
  }
  const closeSheet = (e) => {
    showSheet.value = false
    showLiveInfo.value = false
    showMoreVideo.value = false
  }
  const toDetail = (item) => {
    if (item.status == 2) return;
    if (params.value.type == 2) {
      navigateTo(`/baby/science/index?id=${item?.id}`)
    } else {
      navigateTo(`/socials/detail/index?id=${item?.id}`)
    }
  }
  const toDetailCom = (item) => {
    if (item.status == 2) return;
    if (params.value.type == 2) {
      navigateTo(`/baby/science/index?id=${item?.id}&isCom=true`)
    } else {
      navigateTo(`/socials/detail/index?id=${item?.id}&isCom=true`)
    }
  }
  async function onArticleOperate(row, type) {
    if (!token) {
      login.value.open()
      return false
    }
    let res = await articleOperateApi({
      article_id: row.id,
      type,
      tab: params.value.type
    })
    if (res.code == 200) {
      // 点赞
      if (type == 1) {
        if (row.is_like == 1) {
          row.is_like = 0
          row.zan_number--
        } else {
          row.is_like = 1
          row.zan_number++
        }
      }
      // 收藏
      if (type == 2) {

        if (row.is_collect == 1) {
          row.is_collect = 0
          row.collect_number--
        } else {
          row.is_collect = 1
          row.collect_number++
        }
      }
      // 删除
      if (type == 3) {
        articelList.value.splice(currentIndex.value, 1)
        return res
      }
      // 可见范围
      if (type == 5) {
        articelList.value[currentIndex.value].permission = articelList.value[currentIndex.value].permission ? 0 : 1
      }
    }


    uni.showToast({
      title: res.message,
      icon: 'none',
    })
    console.log(res)
  }
  const editLive = (itme) => {
    showLiveInfo.value = true
  }
  const moreOpen1 = (item) => {
    currentItem.value = item
    showMoreVideo.value = true
  }
  //跳转直播回放/回放详情
  const toPlayback = (item) => {
    let video_time = item.video_time / 3600
    console.log(video_time, item.video_time)
    if (video_time && video_time >= 2) {
      navigateTo(`/socials/video/livePlayList?roomId=${item.id}&userId=${item.roomUserId}`)
    } else {
      navigateTo(`/socials/video/livePlayback?roomId=${item.id}&userId=${item.roomUserId}`)
    }
  }
  const toAppVideo = (item, index) => {
    uni.navigateTo({
      url: `/socials/video/videoDetail?id=${item?.id}`,
      animationType: 'zoom-out',
    })
  }
  const editP = () => {
    showMoreVideo.value = false
    if (currentTab.value == 0 || currentTab.value == 1) {
      selectClick(1)
    } else if (currentTab.value == 2) {
      opreatVideo(2)
    }
  }
  // 1=公开2=仅自己可见
  const opreatVideo = (type) => {
    let data = {
      type: type,
      id: currentItem.value.id,
      doctor_user_id:store?.userInfo?.uid
    }
    // console.log(type,currentItem.permission)
    if (type == 2) {
      data.value = currentItem.value.permission == 0 ? 2 : 1
    }
    svOperateApi(data).then((res) => {
      console.log(res.message)
      if (type == 1) {
        articelList.value.splice(currentIndex.value, 1)
        uni.showToast({ title: res.message, icon: 'none' })
        return res
      } else {
        articelList.value[currentIndex.value].permission = articelList.value[currentIndex.value]
          .permission
          ? 0
          : 1
      }
      uni.showToast({ title: res.message, icon: 'none' })
    })
  }
</script>

<style>
  page {
    background: #F5F6F8;
  }

  .bgWhite {
    background: #fff;
  }
</style>
<style lang="scss" scoped>
  .u-tips-text {
    font-size: 26rpx;
    color: #AAAAAA;
  }

  .cateBox {
    padding: 20rpx 30rpx;

    .cateItem {
      width: 160rpx;
      height: 48rpx;
      line-height: 48rpx;
      background: #F5F6F8;
      border-radius: 24rpx;
      font-size: 28rpx;
      color: #AAAAAA;
      text-align: center;

      &.active {
        background: #00C1B9;
        border-radius: 24rpx;
        color: #fff;
      }
    }

    .cateItem1 {
      width: 260rpx;
      height: 48rpx;
      line-height: 48rpx;
      background: #F5F6F8;
      border-radius: 24rpx;
      font-size: 28rpx;
      color: #AAAAAA;
      text-align: center;

      &.active {
        background: #00C1B9;
        border-radius: 24rpx;
        color: #fff;
      }
    }
  }

  .list {
    padding: 0 25rpx;

    .time {
      font-weight: 400;
      font-size: 26rpx;
      color: #202020;
    }
  }

  .list1 {
    display: flex;
    flex-wrap: wrap;
    padding: 0 24rpx;
    justify-content: space-between;
  }

  .list_item {
    border-radius: 20rpx;
    background: #fff;
    margin: 20rpx 0;

    .userInfo {
      padding: 20rpx;

      .avatar {
        width: 66rpx;
        border-radius: 30rpx;
        height: 66rpx;

        image {
          display: block;
          width: 100%;
          height: 100%;
          border-radius: 30rpx;
        }
      }

      .btn {
        width: 110rpx;
        height: 48rpx;
        border-radius: 24rpx;
        border: 1rpx solid #00C1B9;
        text-align: center;
        font-weight: 400;
        font-size: 26rpx;
        color: #00C1B9;
        line-height: 48rpx;
      }

      .nickname {}
    }

    .captions {
      // padding: 0 20rpx;

      .title {
        font-weight: 500;
        font-size: 28rpx;
        color: #202020;
      }

      .content {
        padding-top: 10rpx;
        font-size: 26rpx;
        color: #5C5C5C;
        position: relative;

        text {
          font-size: 26rpx;
        }

        .showAll {
          position: absolute;
          bottom: 0;
          right: 0;
          background: #fff;
        }
      }

      .image {
        overflow: hidden;
        padding-top: 10rpx;

        .imagesItem {
          width: 32.3%;
          height: 210rpx;
          float: left;
          margin-right: 1.5%;

          image {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 10rpx;
          }

          &:nth-child(3n+3) {
            margin-right: 0;
          }
        }
      }
    }

    .actions {

      // padding: 20rpx;
      .icons {
        width: 28rpx;
        height: 28rpx;

        image {
          display: block;
          width: 100%;
          height: 100%;
        }
      }

      text {
        padding-left: 10rpx;
        font-size: 26rpx;
        color: #5C5C5C;
      }
    }
  }

  .listItem1 {
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 20rpx;
    font-family: PingFangSC, PingFang SC;
    margin: 20rpx auto;
    width: 100%;
    box-sizing: border-box;

    .avatar {
      width: 100rpx;
      height: 100rpx;
      margin-right: 20rpx;

      image {
        width: 100rpx;
        height: 100rpx;
        display: block;
        border-radius: 50%;
      }
    }

    .btn {
      width: 180rpx;
      height: 56rpx;
      background: #00C1B9;
      border-radius: 28rpx;
      text-align: center;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 30rpx;
      color: #FFFFFF;
      line-height: 56rpx;
    }

    .btn1 {
      width: 130rpx;
      height: 56rpx;
      background: #00C1B9;
      border-radius: 28rpx;
      text-align: center;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 30rpx;
      color: #FFFFFF;
      line-height: 56rpx;
    }

    .btn2 {
      width: 130rpx;
      height: 56rpx;
      background: #F6F6F6;
      border-radius: 28rpx;
      text-align: center;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 30rpx;
      color: #999999;
      line-height: 56rpx;
    }

    .time {
      font-weight: 400;
      font-size: 26rpx;
      color: #AAAAAA;
    }

    .name {
      font-weight: 400;
      font-size: 26rpx;
      color: #5C5C5C;
    }

    .userName {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #202020;
      width: 165rpx;
    }

    .yyNum {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #AAAAAA;
      height: 38rpx;
      line-height: 38rpx;
      border-radius: 5rpx;
      border: 1rpx solid #AAAAAA;
      padding: 0 10rpx;
    }
  }

  .listItem2 {
    width: 340rpx;
    height: 586rpx;
    background: #FFFFFF;
    border-radius: 16rpx;
    margin-top: 20rpx;

    .thumb {
      width: 340rpx;
      height: 460rpx;
      border-radius: 16rpx 16rpx 0 0;
      position: relative;

      image {
        width: 340rpx;
        height: 460rpx;
        border-radius: 16rpx 16rpx 0 0;
      }

      .viewsBox {
        position: absolute;
        top: 10rpx;
        left: 10rpx;
        height: 40rpx;
        background: rgba(51, 51, 51, 0.6);
        border-radius: 20rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #FFFFFF;

        align-items: center;
        padding-right: 20rpx;

        .tags {
          width: 68rpx;
          height: 40rpx;
          background: linear-gradient(270deg, #36EDE6 0%, #03ABA4 100%);
          border-radius: 20rpx;
          font-size: 24rpx;
          color: #FFFFFF;
          margin-right: 10rpx;
          text-align: center;
          line-height: 40rpx;
        }
      }
    }

    .caption {
      padding: 20rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;

      .time {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #999999;
      }
    }
  }

  .list2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .listItem3 {
    width: 248rpx;
    height: 332rpx;
    background: #D8D8D8;
    position: relative;

    .thumb {
      display: block;
      width: 248rpx;
      height: 332rpx;
      display: block;
    }

    .more {
      position: absolute;
      top: 10rpx;
      right: 15rpx;
    }

    .foot {
      position: absolute;
      left: 0;
      bottom: 0;
      right: 0;
      background: linear-gradient(180deg, rgba(32, 32, 32, 0) 0%, #202020 100%);
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #FFFFFF;
      padding-left: 15rpx;
      padding-bottom: 10rpx;
    }
  }

  .moreIcon {
    display: block;
    width: 36rpx;
    height: 8rpx;
  }

  .seeIcon {
    width: 26rpx;
    height: 26rpx;
    display: block;
  }

  .line {
    width: 100%;
    height: 1rpx;
    background: #F1F1F1;
  }

  .statusText {
    font-size: 26rpx;

    .success {
      color: #8BCA64;
      position: relative;
      padding-left: 22rpx;

      &::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        left: 0;
        width: 12rpx;
        height: 12rpx;
        background: #8BCA64;
        border-radius: 50%;
      }
    }

    .loading {
      color: #00C1B9;
      position: relative;
      padding-left: 22rpx;

      &::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        left: 0;
        width: 12rpx;
        height: 12rpx;
        background: #00C1B9;
        border-radius: 50%;
      }
    }

    .noPass {
      color: #CB5000;
      position: relative;
      padding-left: 22rpx;

      &::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        left: 0;
        width: 12rpx;
        height: 12rpx;
        background: #CB5000;
        border-radius: 50%;
      }
    }
  }

  .emptyBox {
    font-size: 26rpx;
    color: #AAAAAA;
    text-align: center;
    padding-top: 300rpx;

    image {
      width: 240rpx;
      height: 200rpx;
      display: block;
      margin: 20rpx auto;
    }
  }

  .reasonBox {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: #CB5000;
    padding: 20rpx;
    background: #F5F6F8;
    border-radius: 20rpx;
    width: 100%;
    box-sizing: border-box;

    text {
      color: #202020;
    }
  }

  .sheetlistItem {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 30rpx;
    color: #202020;
    line-height: 102rpx;
    text-align: center;
    border-bottom: 1rpx solid #F1F1F1;

    &:nth-child(3) {
      color: #CB5000;
    }
  }

  .u-action-cencel {
    font-weight: 400;
    font-size: 30rpx;
    color: #AAAAAA;
    text-align: center;
    line-height: 102rpx;
  }

  .videoimage {
    width: 100%;
    height: 370rpx;
    position: relative;
    margin-top: 10rpx;

    image {
      width: 660rpx;
      height: 370rpx;
      display: block;
    }

    .playIcon {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      margin: auto;
      width: 66rpx;
      height: 66rpx;
      display: block;
    }
  }

  .itemMoreVideo {
    text-align: center;
    margin-top: 20rpx;
    margin-bottom: 100rpx;

    image {
      width: 88rpx;
      height: 88rpx;
      display: block;
      margin: 0 auto;
    }

    font-family: PingFangSC,
    PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: #202020;
  }

  .noPassReson {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #202020;
    padding: 30rpx 50rpx;

    text {
      color: #CB5000;
    }
  }

  .delVideo {
    width: 400rpx;
    height: 88rpx;
    background: #CB5000;
    border-radius: 44rpx;
    font-size: 30rpx;
    color: #FFFFFF;
    line-height: 88rpx;
    text-align: center;
    margin: 48rpx auto 20rpx;
  }
</style>
